<template>
	<view class="container">
		<view class="first-item">
			<view style="margin-top:2px">
				<view v-for="(gridItem,gridIndex) in gridItemList" :key="gridIndex">
					<view style="width:16px;height: 16px;border-radius: 8px;border: 1px solid #3E9CF9;color:#3E9CF9;font-size: 8px;text-align: center;line-height: 14px;"
					 v-if="gridIndex == 0">主</view>
					<view v-else>
						<view style="height:60upx;width:1px;border-left: 1px dashed #C4C4C4;margin-left: 8px;margin-top: 5upx;"></view>
						<view style="width:16px;height: 16px;border-radius: 8px;border: 1px solid #ff0000;color:#ff0000;font-size: 8px;text-align: center;line-height: 14px;margin-top:5upx">次</view>
					</view>
				</view>
			</view>
			<view style="margin-left:20upx;width:calc(100% - 100upx)">
				<view v-for="(gridItem,gridIndex) in gridItemList" :key="gridIndex">
					<view style="height:98upx">
						<view style="font-size: 14px;font-weight: bolder;">
							{{gridItem.gridName}}
						</view>
						<view style="font-size: 11px;line-height: 14px;color:#999999">
							{{gridItem.area}}㎡
						</view>
					</view>
					<view style="margin-top:20upx;font-size: 11px;line-height: 14px;color:#999999" v-if="gridIndex == (gridItemList.length - 1)">
						管理人员：{{gridItem.adminCount}}
					</view>
				</view>
			</view>
		</view>
		<view class="second-item">
			<view class="top-title">
				管理员信息
			</view>
			<view class="bottom-contain" style="text-align: center;">
				<view class="bottom-title">
					<view style="width:30%;">管理员姓名</view>
					<view style="width:35%;">管理员电话</view>
					<view style="width:35%;">管理员职务</view>
				</view>
				<view class="bottom-data">
					<view class="table-row" v-for="(item,index) in gridAdminList">
						<view style="width:30%;overflow: hidden;">{{item.adminName}}</view>
						<view style="width:35%;overflow: hidden;">{{item.adminTel}}</view>
						<view style="width:35%;overflow: hidden;">{{item.adminPosition}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gridItemList: "",
				gridAdminList:[],
				gridId:""
			}
		},
		onLoad(options) {
			if (options) {
				this.gridItemList = JSON.parse(options.item)
				this.gridId = this.gridItemList[this.gridItemList.length - 1].gridBasicId
			}
			this.initData()
		},
		methods: {
			initData() {
				let params = {
					gridId: this.gridId
				}
				this.$api.request.queryAdminListByGridId(params, (res) => {
					if (res.body.status.statusCode === '0') {
                        this.gridAdminList = res.body.data.list
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}

	.container {
		width: 100%;
		height: 100%;
		padding: 0 20upx;
	}

	.first-item {
		margin: 20upx 0;
		border-radius: 5px;
		background-color: white;
		padding: 20upx;
		display: flex;
		flex-direction: row;
	}

	.second-item {
		margin: 20upx 0;
		border-radius: 5px;
		background-color: white;
		padding: 20upx;
	}

	.top-title {
		height: 60upx;
		line-height: 60upx;
		font-size: 30upx;
		font-weight: bold;
		border-bottom: 1px solid #F8F8F8;
	}

	.bottom-title {
		color: #999999;
		font-size: 26upx;
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: space-between;
		padding: 20upx 10upx;
	}

	.table-row {
		font-size: 24upx;
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: space-between;
		padding: 10upx;
	}
</style>
